<template>
  <div class="container">
    <custom-header
      title="巡检任务管理"
      @synchronization="synchronization"
    ></custom-header>
    <div class="content">
      <div class="filter">
        <!-- <div class="item"
             v-for="(item,index) in filterList"
             :key="index"> -->
        <el-row>
          <el-form :model="queryParams" label-width="80px">
            <el-col :span="8">
              <el-form-item label="场景名称:">
                <el-select
                  v-model="queryParams.scenario_name"
                  class="common-style"
                  clearable
                >
                  <el-option
                    v-for="item in scenarioBox"
                    :key="item.scenario_no"
                    :label="item.scenario_name"
                    :value="item.scenario_name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="任务名称:">
                <el-select
                  v-model="queryParams.job_name"
                  class="common-style"
                  clearable
                >
                  <el-option
                    v-for="item in jobBox"
                    :key="item.job_no"
                    :label="item.job_name"
                    :value="item.job_name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="95px" label="机器人名称:">
                <el-select
                  v-model="queryParams.dog_name"
                  class="common-style"
                  clearable
                >
                  <el-option
                    v-for="item in robotBox"
                    :key="item.dog_sn"
                    :label="item.dog_name"
                    :value="item.dog_name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="场景编号:">
                <el-select
                  v-model="queryParams.scenario_no"
                  class="common-style"
                  clearable
                >
                  <el-option
                    v-for="item in scenarioBox"
                    :key="item.scenario_no"
                    :label="item.scenario_no"
                    :value="item.scenario_no"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="任务编号:">
                <el-select
                  v-model="queryParams.job_no"
                  class="common-style"
                  clearable
                >
                  <el-option
                    v-for="item in jobBox"
                    :key="item.job_no"
                    :label="item.job_no"
                    :value="item.job_no"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="95px" label="机器人编号:">
                <el-select
                  v-model="queryParams.dog_sn"
                  class="common-style"
                  clearable
                >
                  <el-option
                    v-for="item in robotBox"
                    :key="item.dog_sn"
                    :label="item.dog_sn"
                    :value="item.dog_sn"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="135px" label="巡检计划开始时间:">
                <el-date-picker
                  v-model="queryParams.inspection_start_time"
                  class="common-style"
                  type="datetimerange"
                  placeholder="选择日期时间"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-form>
          <el-col :span="16" class="buttons">
            <el-button @click="reset">重置</el-button>
            <el-button type="primary" @click="search">查询</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="action">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addpatrolInspectionTask"
          >新增巡检任务</el-button
        >
        <!-- <el-button icon="el-icon-refresh" @click="synchronization()"
          >同步巡检任务</el-button
        > -->
      </div>
      <div class="table">
        <customer-table
          :tableInfo="tableInfo"
          @actionClick="tableActionClick"
        ></customer-table>
      </div>
    </div>
    <!-- <custom-footer></custom-footer> -->
    <el-pagination
      @current-change="handlePageChange"
      @size-change="handleSizeChange"
      :current-page="pageNum"
      :page-size="pageSize"
      layout="total,sizes,prev, pager, next, jumper"
      background
      :total="total"
      align="center"
    >
    </el-pagination>
    <div class="alert" v-if="synchronizationVisible === true">
      <p class="synchronization">
        正在场景同步<i class="el-icon-close" @click="close"></i>
      </p>
      <el-progress :percentage="60"></el-progress>
      <p>正在请求数据，大约剩余5s</p>
    </div>
    <el-dialog
      :title="true ? '新建巡检任务' : '编辑巡检任务'"
      :visible.sync="dialogVisible"
      append-to-body
      custom-class="custom_dialog"
      width="60%"
      :before-close="handleClose"
    >
      <el-row>
        <el-form
          label-width="140px"
          ref="addForm"
          :rules="rules"
          :model="addForm"
        >
          <el-col :span="12">
            <el-form-item label="场景名称" prop="scenario_name">
              <el-select
                v-model="addForm.scenario_name"
                class="common-style"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in scenarioBox"
                  :key="item.scenario_no"
                  :label="item.scenario_name"
                  :value="item.scenario_name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="场景编号" prop="scenario_no">
              <el-input
                v-model="addForm.scenario_no"
                placeholder="待同步"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务名称" prop="job_name">
              <el-input
                v-model="addForm.job_name"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务编号" prop="job_no">
              <el-input
                v-model="addForm.job_no"
                placeholder="待同步"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机器人名称" prop="dog_name">
              <el-input
                v-model="addForm.dog_name"
                placeholder="待同步"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机器人编号" prop="dog_no">
              <el-input
                v-model="addForm.dog_no"
                placeholder="待同步"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="巡检计划开始时间" prop="inspection_start_time">
              <el-date-picker
                style="width: 100%"
                v-model="addForm.inspection_start_time"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预计时长">
              <!-- v-model="addForm.entry_date" -->
              <div>
                时：<select v-model="hour" placeholder="请选择">
                  <option
                    v-for="item in options"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></option>
                </select>
                分：<select v-model="minutes" placeholder="请选择">
                  <option
                    v-for="item in optionsM"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></option>
                </select>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="温度预警值（℃）" prop="temp_alarm">
              <el-input
                v-model="addForm.temp_alarm"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="湿度预警值（%）" prop="humi_alarm">
              <el-input
                v-model="addForm.humi_alarm"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="patrolInspectionTaskSubmit"
          >提 交</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="任务下发"
      :visible.sync="taskDialogVisible"
      append-to-body
      custom-class="custom_dialog"
      width="68%"
    >
      <div class="dialog_filter">
        <div class="item">
          <span class="label">机器人名称：</span>
          <el-input
            v-model="taskDialogFilter.dog_name"
            placeholder="请输入"
          ></el-input>
        </div>
        <div class="item">
          <span class="label">机器人编号：</span>
          <el-input
            v-model="taskDialogFilter.dog_sn"
            placeholder="请输入"
          ></el-input>
        </div>
        <div class="item">
          <el-button type="primary" icon="el-icon-search" @click="searchTask"
            >查询</el-button
          >
        </div>
      </div>
      <div class="table">
        <!-- <customer-table
          :tableInfo="dialogTableInfo"
          :selection="true"
        ></customer-table> -->
        <el-table
          :data="tableData"
          height="521"
          border
          @row-click="singleElection"
          highlight-current-row
          :header-cell-style="{ background: '#f5f5f5' }"
        >
          <el-table-column align="center" width="55" label="">
            <template slot-scope="scope">
              <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
              <el-radio
                class="radio"
                v-model="templateSelection"
                :label="scope.row"
                >&nbsp;</el-radio
              >
            </template>
          </el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="60px"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="机器人名称"
            align="center"
            show-overflow-tooltip
            prop="dog_name"
          >
          </el-table-column>
          <el-table-column
            label="机器人编号"
            align="center"
            show-overflow-tooltip
            prop="dog_sn"
          >
          </el-table-column>
          <el-table-column
            label="机器人下任务数"
            align="center"
            show-overflow-tooltip
            width="140px"
            prop="job_num"
          >
          </el-table-column>
          <el-table-column
            label="机器人状态"
            align="center"
            show-overflow-tooltip
            prop="dog_status"
          >
            <template slot-scope="props">
              <span v-if="props.row.dog_status == '1'">在线</span>
              <span v-if="props.row.dog_status == '0'">离线</span>
            </template>
          </el-table-column>
          <el-table-column
            label="任务状态"
            align="center"
            show-overflow-tooltip
            prop="job_status"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.job_status == 0 ? "——" : "" }}</span>
              <span>{{ scope.row.job_status == 1 ? "待执行" : "" }}</span>
              <span class="blue">{{
                scope.row.job_status == 2 ? "执行中" : ""
              }}</span>
              <span class="org">{{
                scope.row.job_status == 3 ? "暂停" : ""
              }}</span>
              <span class="red">{{
                scope.row.job_status == 4 ? "中止" : ""
              }}</span>
              <span class="green">{{
                scope.row.job_status == 5 ? "已完成" : ""
              }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        @current-change="handlePageChangeDig"
        @size-change="handleSizeChangeDig"
        :current-page="pageNumDig"
        :page-size="pageSizeDig"
        layout="total,sizes,prev, pager, next, jumper"
        background
        :total="totalDig"
        align="center"
      >
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="taskDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import customHeader from "@/pages/Robot/components/CustomHeader.vue";
import customerTable from "@/pages/Robot/components/CustomerTable.vue";
import customFooter from "@/pages/Robot/components/CustomFooter.vue";
import { patrolInspectionTaskApi } from "@/services/Robot";
import { standardCodeApi } from "@/services/StandardCode";

export default {
  name: "PatrolInspectionTaskManagement",
  components: {
    customHeader,
    customerTable,
    customFooter,
  },
  data() {
    return {
      mystateA1: null,
      synchronizationVisible: false,
      filterList: [],
      filter: {},
      dialogVisible: false,
      // tipsDialogVisible: false,
      formList: [
        {
          label: "场景名称",
          prop: "sceneName",
          type: "input",
          placeholder: "待同步",
          disabled: true,
        },
        {
          label: "场景编号",
          prop: "sceneNumber",
          type: "input",
          placeholder: "待同步",
          disabled: true,
        },
        {
          label: "任务名称",
          prop: "taskName",
          type: "input",
          placeholder: "请输入",
        },
        {
          label: "任务编号",
          prop: "taskNumber",
          type: "input",
          placeholder: "待同步",
          disabled: true,
        },
        {
          label: "机器人名称",
          prop: "robotName",
          type: "input",
          placeholder: "待同步",
          disabled: true,
        },
        {
          label: "机器人编号",
          prop: "robotNumber",
          type: "input",
          placeholder: "待同步",
          disabled: true,
        },
        {
          label: "巡检计划开始时间",
          prop: "startTime",
          type: "daterange",
          placeholder: "待同步",
        },
        {
          label: "预计时长",
          prop: "duration",
          type: "input",
          placeholder: "待同步",
          disabled: true,
        },
        {
          label: "温度预警值（℃）",
          prop: "temperature",
          type: "input",
          placeholder: "请输入",
        },
        {
          label: "湿度预警值（%）",
          prop: "humidity",
          type: "input",
          placeholder: "请输入",
        },
        {
          label: "场景地图",
          prop: "map",
          type: "upload",
        },
      ],
      form: {},
      tableInfo: {
        column: [
          {
            label: "序号",
            prop: "index",
            type: "index",
            width: "50",
          },
          {
            label: "场景名称",
            prop: "scenario_name",
            width: "150",
          },
          {
            label: "场景编号",
            prop: "scenario_no",
            width: "150",
          },
          {
            label: "任务名称",
            prop: "job_name",
            width: "150",
          },
          {
            label: "任务编号",
            prop: "job_no",
            width: "150",
          },
          {
            label: "机器人名称",
            prop: "dog_name",
            width: "150",
          },
          {
            label: "机器人编号",
            prop: "dog_sn",
            width: "150",
          },
          {
            label: "巡检计划开始时间",
            prop: "inspection_start_time",
            width: "240",
          },
          {
            label: "预计时长",
            prop: "duration",
            width: "150",
          },
          {
            label: "任务状态",
            prop: "job_status",
            width: "150",
          },
          {
            label: "操作",
            prop: "action",
            type: "PatrolInspectionTaskManagement",
            width: "400",
          },
        ],
        data: [],
      },
      actionType: null,
      actionDict: {
        start: "启动",
        pause: "暂停",
        continue: "继续",
        returnVoyage: "一键返航",
      },
      taskDialogVisible: false,
      taskDialogFilter: {
        dog_name: "",
        dog_sn: "",
      },
      dialogTableInfo: {
        column: [
          {
            label: "序号",
            prop: "index",
            type: "index",
            width: "50",
          },
          {
            label: "场景名称",
            prop: "sceneName",
            width: "120",
          },
          {
            label: "场景编号",
            prop: "sceneNumber",
            width: "120",
          },
          {
            label: "任务名称",
            prop: "taskName",
            width: "160",
          },
          {
            label: "任务编号",
            prop: "taskNumber",
            width: "120",
          },
          {
            label: "机器人名称",
            prop: "robotName",
            width: "120",
          },
          {
            label: "机器人编号",
            prop: "robotNumber",
            width: "120",
          },
          {
            label: "巡检计划开始时间",
            prop: "startTime",
            width: "200",
          },
          {
            label: "预计时长",
            prop: "duration",
            width: "120",
          },
          {
            label: "任务状态",
            prop: "taskStatus",
            width: "120",
          },
        ],
        data: [],
      },
      addForm: {
        scenario_name: "",
        scenario_no: "",
        job_name: "",
        job_no: "",
        dog_name: "",
        dog_no: "",
        inspection_start_time: "",
        duration: "",
        temp_alarm: "",
        humi_alarm: "",
      },
      rules: {
        job_name: [
          { required: true, message: "请输入任务名称", trigger: "blur" },
        ],
        temp_alarm: [
          { required: true, message: "请输入温度预警值（℃）", trigger: "blur" },
        ],
        humi_alarm: [
          { required: true, message: "请输入湿度预警值（%）", trigger: "blur" },
        ],
      },
      hour: "",
      minutes: "",
      options: [],
      optionsM: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      pageNumDig: 1,
      pageSizeDig: 10,
      totalDig: 0,
      tableData: [],
      templateSelection: {}, // 巡检任务管理下发单选
      queryParams: {},
      robotBox: [],
      jobBox: [],
      scenarioBox: [],
      scenarioObj: {},
      getCodeList: [],
    };
  },
  created() {
    // this.mystateA1 = this.$notify({
    //   dangerouslyUseHTMLString: true,
    //   message: `<i class="el-icon-s-opportunity" style='background: red;-webkit-background-clip: text;color: transparent;'></i>
    //       <span>有新的任务上传，请尽快同步信息！</span>
    //       <span>2022-11-22 10:45:06</span>
    //       <i class="el-icon-arrow-right"
    //          id="messageTrack" style='margin-left:10px'></i>`,
    //   duration: 0,
    // });
  },
  mounted() {
    document.addEventListener("mouseup", (e) => {
      let _track = document.getElementById("messageTrack");
      if (_track) {
        if (_track.contains(e.target)) {
          this.synchronization();
          this.mystateA1.close();
        }
      }
    });
    this.patrolInspectionTaskList();
    this.handleSelect();
    this.getStardandCode();
  },
  methods: {
    // 获取标准码
    getStardandCode() {
      standardCodeApi
        .getStandardCodeData({
          data: {
            code_type: "robotJobStatus",
          },
        })
        .then((res) => {
          if (res.code == 0) {
            if (Array.is(res.data.list)) {
              this.getCodeList = res.data.list;
            }
          }
          // this.companyTypeArr = res.data.list
          console.log("标准码", res);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 新增巡检任务
    addpatrolInspectionTask() {
      this.$router.push({ path: `/PatrolInspectionTaskManagementAdd` });
      // this.dialogVisible = true;
      let hList = [];
      let mList = [];
      for (let i = 0; i <= 24; i++) {
        if (i < 10) {
          i = "0" + i;
        }
        console.log(i, "23324");
        hList.push(i);
      }
      for (let i = 0; i <= 60; i++) {
        if (i < 10) {
          i = "0" + i;
        }
        mList.push(i);
      }
      this.optionsM = mList;
      this.options = hList;
      this.$refs.addForm.resetFields();
    },
    // 提交新增巡检任务
    patrolInspectionTaskSubmit() {
      this.$refs.addForm.validate((valid, object) => {
        if (valid) {
          const params = {
            ...this.addForm,
            duration: String(this.hour) + ":" + String(this.minutes),
          };
          console.log(params, this.hour, this.minutes, "params1111");
          patrolInspectionTaskApi
            .jobSave({ data: { ...params } })
            .then((res) => {
              console.log(res, "122222res");
              if (res.code == 0) {
                this.dialogVisible = false;
              }
            })
            .catch((e) => {});
        }
      });
    },
    handleClose(done) {
      // this.$emit('update:lookDesignDraweVisible', false)
      // this.onCancel();
      this.dialogVisible = false;
      done();
    },
    // 巡检任务列表分页
    patrolInspectionTaskList(queryObj) {
      const params = {
        is_page: 1,
        page_size: this.pageSize,
        page: this.pageNum,
        ...queryObj,
      };
      patrolInspectionTaskApi
        .jobList({
          params: {
            ...params,
          },
        })
        .then((res) => {
          console.log(res, "res222222");
          if (res.code == 0) {
            if (Array.isArray(res.data.list)) {
              this.tableInfo.data = res.data.list;
              this.pageNum = res.data.page;
              this.pageSize = res.data.page_size;
              this.total = res.data.total_count;
            }
          }
        })
        .catch((e) => {});
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.pageNum = 1;
      this.patrolInspectionTaskList();
    },
    handlePageChange(page) {
      this.pageNum = page;
      this.patrolInspectionTaskList();
    },

    handleSizeChangeDig(size) {
      this.pageSizeDig = size;
      this.pageNumDig = 1;
      this.patrolInspectionTaskListDig();
    },
    handlePageChangeDig(page) {
      this.pageNumDig = page;
      this.patrolInspectionTaskListDig();
    },
    // 巡检任务列表分页
    patrolInspectionTaskListDig(searchObj) {
      const params = {
        is_page: 1,
        page_size: this.pageSizeDig,
        page: this.pageNumDig,
        ...searchObj,
      };
      patrolInspectionTaskApi
        .robotSelectList({
          params: {
            ...params,
          },
        })
        .then((res) => {
          console.log(res, "res222222");
          if (res.code == 0) {
            if (Array.isArray(res.data.list)) {
              this.tableData = res.data.list;
              this.pageNumDig = res.data.page;
              this.pageSizeDig = res.data.page_size;
              this.totalDig = res.data.total_count;
            }
          }
        })
        .catch((e) => {});
    },

    searchTask() {
      const params = {
        ...this.taskDialogFilter,
      };
      this.patrolInspectionTaskListDig({ ...params });
    },
    close() {
      this.synchronizationVisible = false;
    },
    synchronization() {
      this.synchronizationVisible = true;
      const params = {
        flag: 2,
      };
      patrolInspectionTaskApi
        .robotSync({
          data: {
            ...params,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.patrolInspectionTaskList();
            this.synchronizationVisible = false;
          }
        })
        .catch((e) => {
          this.synchronizationVisible = false;
        });
    },
    reset() {
      this.queryParams = {};
      this.patrolInspectionTaskList();
    },
    search() {
      console.log(this.queryParams, "queryParams");
      let start_time = Array.isArray(this.queryParams.inspection_start_time)
        ? this.queryParams.inspection_start_time[0]
        : undefined;
      let end_time = Array.isArray(this.queryParams.inspection_start_time)
        ? this.queryParams.inspection_start_time[1]
        : undefined;
      delete this.queryParams.inspection_start_time;
      const params = {
        ...this.queryParams,
        start_time,
        end_time,
      };
      this.patrolInspectionTaskList({ ...params });
    },
    tableActionClick(row, action) {
      // let specialAction = ["taskSwitch", "details"]
      if (action === "start") {
        this.$confirm("确认启动此任务？", "启动任务", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            console.log(row, "row");
            const params = {
              dog_sn: row.dog_sn,
              job_no: row.job_no,
              scenario_no: row.scenario_no,
              exec: 1,
            };
            patrolInspectionTaskApi
              .robotJobExec({
                data: {
                  ...params,
                },
              })
              .then((res) => {
                if (res.code == 0) {
                  this.$message({
                    type: "success",
                    message: "巡检任务启动",
                  });
                  this.patrolInspectionTaskList();
                }
              });
          })
          .catch((e) => {});
      } else if (action === "pause") {
        this.$confirm("确认暂停此任务？", "暂停任务", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            console.log(row, "row");
            const params = {
              dog_sn: row.dog_sn,
              job_no: row.job_no,
              scenario_no: row.scenario_no,
              exec: 2,
            };
            patrolInspectionTaskApi
              .robotJobExec({
                data: {
                  ...params,
                },
              })
              .then((res) => {
                if (res.code == 0) {
                  this.$message({
                    type: "success",
                    message: "巡检任务暂停",
                  });
                  this.patrolInspectionTaskList();
                }
              });
          })
          .catch((e) => {});
      } else if (action === "continue") {
        this.$confirm("确认继续此任务？", "继续任务", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            console.log(row, "row");
            const params = {
              dog_sn: row.dog_sn,
              job_no: row.job_no,
              scenario_no: row.scenario_no,
              exec: 3,
            };
            patrolInspectionTaskApi
              .robotJobExec({
                data: {
                  ...params,
                },
              })
              .then((res) => {
                if (res.code == 0) {
                  this.$message({
                    type: "success",
                    message: "巡检任务继续",
                  });
                  this.patrolInspectionTaskList();
                }
              });
          })
          .catch((e) => {});
      } else if (action === "returnVoyage") {
        this.$confirm("确认一键返航终止任务？", "确认一键返航", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
      } else if (action == "delete") {
        this.$confirm("确定删除此任务？", "删除巡检任务", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            console.log(row, "row");
            const params = {
              job_id: row.job_id,
            };
            patrolInspectionTaskApi
              .jobDelete({
                data: {
                  ...params,
                },
              })
              .then((res) => {
                if (res.code == 0) {
                  this.$message({
                    type: "success",
                    message: "巡检任务删除成功",
                  });
                  this.patrolInspectionTaskList();
                }
              });
          })
          .catch((e) => {});
      } else if (action === "taskSwitch") {
        this.taskDialogVisible = true;
        this.scenarioObj = row;
        this.patrolInspectionTaskListDig();
      } else if (action === "details") {
        this.$router.push({
          path: `/PatrolInspectionTaskManagementDetails?job_id=${row.job_id}`,
        });
      }
      console.log(row, action);
    },
    // 下发单选
    singleElection(row) {
      this.templateSelection = row;
      console.log(row, "row11111");
    },
    // 下发弹框确认提交
    handleSubmit() {
      console.log(
        this.templateSelection.dog_sn,
        this.scenarioObj,
        "taskDialogVisible = false"
      );
      const params = {
        ...this.scenarioObj,
        dog_sn: this.templateSelection.dog_sn,
      };
      patrolInspectionTaskApi
        .robotPublishJob({
          data: {
            ...params,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "任务下发成功",
            });
            this.patrolInspectionTaskList();
            this.taskDialogVisible = false;
          }
        });
    },
    // 下拉框
    handleSelect() {
      patrolInspectionTaskApi.commonScenarioBox().then((res) => {
        if (res.code == 0) {
          this.scenarioBox = res.data.list;
        }
      });
      patrolInspectionTaskApi.commonJobBox().then((res) => {
        if (res.code == 0) {
          this.jobBox = res.data.list;
        }
      });
      patrolInspectionTaskApi.commonRobotBox().then((res) => {
        if (res.code == 0) {
          this.robotBox = res.data.list;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input,
.el-select,
.el-date-editor {
  width: 100%;
}

.container {
  // margin-bottom: 24px;

  .content {
    padding: 24px 20px 0 20px;

    .filter {
      .buttons {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-end;
      }
      //   display: flex;
      //   flex-wrap: wrap;
      //   justify-content: space-between;
      //   gap: 40px;

      //   .item {
      //     width: 30%;
      //     display: flex;
      //     align-items: center;
      //     justify-content: center;

      //     .label {
      //       width: 120px;
      //       text-align: end;
      //       margin-right: 10px;
      //       font-size: 13px;
      //       color: rgba(0, 0, 0, 0.85);
      //       font-weight: bold;
      //     }

      //     .el-input,
      //     .el-select,
      //     .el-date-editor {
      //       flex: 1;
      //     }

      //     .el-range-separator {
      //       width: 20px;
      //     }
      //   }

      //   .item:last-child {
      //     justify-content: end;
      //   }
    }

    .action {
      padding: 24px 0;

      .el-button:last-child {
        margin-left: 40px;
      }

      .el-button--default {
        color: #1890ff;
        border-color: #1890ff;
      }
    }
  }

  .el-button--primary {
    background-color: #1890ff;
    border-color: #1890ff;
    color: #fff;
  }
}

.alert {
  width: 390px;
  height: 178px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 4px rgba(153, 153, 153, 0.349019607843137);
  position: fixed;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  border-radius: 4px;
  padding: 12px 8px 0 12px;
  /deep/ .el-progress {
    margin: 34px 0 12px 0;
  }
  .synchronization {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }
  p {
    font-family: "MicrosoftYaHei", "Microsoft YaHei", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
}

/deep/ .el-dialog__body {
  padding: 30px 20px 0 20px;
}
/deep/ .el-pagination {
  margin: 20px 0;
}

// 介入样式
select {
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
}
</style>
<style lang="scss">
.custom_dialog {
  .el-dialog__header {
    padding: 18px;
    text-align: center;
    background-color: #1890ff;

    .el-dialog__close,
    .el-dialog__title {
      color: white;
      font-weight: bold;
      font-size: 18px;
    }
  }

  .item_list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;

    .item {
      width: 48%;
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      padding: 0 20px;

      .label {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
        width: 140px;
        text-align: end;
      }

      .el-input,
      .el-date-editor {
        flex: 1;
      }

      .el-range-separator {
        width: 20px;
      }
    }

    .avatar-uploader {
      flex: 1;

      .el-upload:hover {
        border-color: #409eff;
      }

      .el-upload {
        width: 100%;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }

      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100%;
        height: 102px;
        line-height: 102px;
        text-align: center;
      }
    }
  }

  .dialog_filter {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .item {
      display: flex;
      align-items: center;
      width: 33%;

      .label {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
        width: 100px;
        text-align: end;
      }

      .el-input {
        flex: 1;
      }

      .el-button {
        margin-left: 50px;
      }
    }
  }

  .table {
    padding-top: 30px;
  }

  .el-dialog__footer {
    text-align: center;
    padding: 20px 0;

    .el-button--primary {
      margin-left: 50px;
    }
  }
}

.blue {
  color: #409eff;
}
.org {
  color: #f59a23;
}
.red {
  color: red;
}
.green {
  color: #70b603;
}
</style>
